<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const bgImage = new URL('../../assets/img/bj.png', import.meta.url).href
const homeTop = new URL('../../assets/img/home_top.png', import.meta.url).href
const cloud = new URL('../../assets/img/cloud.png', import.meta.url).href
const topLeft = new URL('../../assets/img/home_text.png', import.meta.url).href
const topRight = new URL('../../assets/img/home_show.png', import.meta.url).href
const topLogo = new URL('../../assets/img/info_logo.png', import.meta.url).href

const funcMap = {
  PRODUCTION: {
    img: 'http://zs.xiaoqin.com.cn/xqc_doc/certificate/icon/shengchan.png',
    url: './production_info',
    text: '生产信息',
    color: `180deg, #FF837B 0%, #F34882 100%`
  },
  PRODUCT: {
    img: 'http://zs.xiaoqin.com.cn/xqc_doc/certificate/icon/chanpin.png',
    url: './produce_info',
    text: '产品信息',
    color: '180deg, #43CEE9 0%, #6A71EC 100%'
  },
  DETECTION: {
    img: 'http://zs.xiaoqin.com.cn/xqc_doc/certificate/icon/jiance.png',
    url: './detection',
    text: '检测中心',
    color: `180deg, #44E2FE 0%, #2568A3 100%`
  },
  ENTERPRISE: {
    img: 'http://zs.xiaoqin.com.cn/xqc_doc/certificate/icon/qiye.png',
    url: './company',
    text: '企业介绍',
    color: `180deg, #4AF2D6 0%, #187AA5 100%`
  },
  ENTERPRISE_NEW: {
    img: 'http://zs.xiaoqin.com.cn/xqc_doc/certificate/icon/xinwen.png',
    url: './news',
    text: '企业新闻',
    color: `180deg, #F89B6E 0%, #EF7330 100%`
  },
  VIDEOS:{
    img:'http://zs.xiaoqin.com.cn/xqc_doc/certificate/icon/shipin.png',
    url:'./videos',
    text:'视频信息',
    color: `180deg, #FFCF3D 0%, #FFC000 100%`
  }
  // MESSAGE: {
  //   img: 'http://s.xiaoqin.com.cn/static/images/yly/communicate.png',
  //   url: '',
  //   text: '聊参论道',
  //   color: `180deg, #CAAAFD 0%, #7A6AD8 100%`
  // }
}

/**  */
const traceabilityCode = ref()
onMounted(() => {
  traceabilityCode.value = useRouter().currentRoute.value.query.traceabilityCode
})

/**
 * 跳转页面
 * @param {*} e
 */
const goto = (e) => {
  if (!e) return
  let url = `${e}?traceabilityCode=${traceabilityCode.value}`
  // if ('./produce_info' === e || './production_info' === e) {
  //   url = `${e}?traceabilityCode=${traceabilityCode.value}`
  // }
  location.href = url
}

document.title = '晓芹食品追溯信息查询'
</script>
<template>
  <div class="Trace-container backgroundImage" :style="{ backgroundImage: `url(${bgImage})` }">
    <div class="Trace-container-top">
      <div class="Trace-container-top-center">
        <!-- <div class="Trace-container-top-center-left">
          <img :src="topLeft" alt="" />
        </div> -->
        <div class="Trace-container-top-center-right">
          <img :src="topRight" alt="" />
        </div>
        <!-- <div class="Trace-container-top-center-logo">
          <img :src="topLogo" alt="" />
        </div> -->
      </div>
      <div class="Trace-container-top-cloud">
        <img :src="cloud" alt="" />
      </div>
    </div>
    <div class="Trace-container-content">
      <div class="Trace-container-content-inner">
        <div class="Trace-container-content-inner-item" v-for="(item, index) in funcMap" :key="index">
          <div class="Trace-container-content-inner-item-inner" @click="goto(item.url)">
            <div
              class="Trace-container-content-inner-item-img"
              :style="{ background: `linear-gradient(${item.color})` }"
            >
              <img :src="item.img" alt="" />
            </div>
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
div {
  box-sizing: border-box;
}
.Trace-container {
  height: 50vh;
  min-height: 400px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  .Trace-container-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 1px 2px #ffffff;

    .Trace-container-top-img {
      width: calc(100% - 30px);
      margin: auto;

      img {
        width: 100%;
      }
    }

    .Trace-container-top-center {
      // border-radius: 25px 0 0 0;
      background-color: #fff;
      width: calc(100% - 30px);
      height: 180px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px;
      position: relative;

      .Trace-container-top-center-left {
        width: 50%;
        padding: 0 23px;
        text-align: center;
      }
      .Trace-container-top-center-right {
      }

      .Trace-container-top-center-logo {
        position: absolute;
        top: 0;
        left: 0;
        width: 77px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--primary);

        img {
          width: 52px;
        }
      }
    }

    .Trace-container-top-cloud {
      position: absolute;
      bottom: -90px;
      width: 100%;
      img {
        width: 100%;
      }
    }
  }

  .Trace-top-logo {
    width: 150px;
    height: 70px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .Trace-container-content {
    margin-top: 360px;
    height: calc(100vh - 360px);
    background-color: #ffffff;
    box-shadow: 0 0 1px 2px #ffffff;

    .Trace-container-content-inner {
      display: flex;
      flex-wrap: wrap;
      padding-top: 30px;

      .Trace-container-content-inner-item {
        margin-bottom: 34px;

        .Trace-container-content-inner-item-inner {
          width: calc((100vw) / 3);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          border-radius: 10px;
          font-size: 18px;
          font-weight: 400;
        }

        .Trace-container-content-inner-item-img {
          border-radius: 100%;
          overflow: hidden;
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 12px;
        }

        img {
          height: 36px;
          width: 36px;
        }
      }
    }
  }
}
</style>
